<template>
    <div class="container">
        <div class="orderMenu">
            <span :class="[{'active':showCurrent},'orderMenuItem']" @click="showCurrent=true">当前订单</span>
            <span :class="[{'active':!showCurrent},'orderMenuItem']" @click="showCurrent=false">全部订单</span>
        </div>
        <div v-if="isUser">
            <currentOrder v-if="showCurrent" :oderId="currentOrder"></currentOrder>
            <allOrder v-else></allOrder>
        </div>
        <div v-else>
            <p>请先登录哦~</p>
        </div>
    </div>
</template>
<script>
import currentOrder from './currentOrder'; 
import allOrder from './allOrder'; 
export default {
  data(){
      return{
          orders:[],
          isUser:false,
          showCurrent:true,
          currentOrder:undefined
      }
  },
  props:['id'],
  components:{
      currentOrder,allOrder
  },
  mounted(){
      if(localStorage.getItem("Booktoken")){
          this.isUser=true
          if(this.$route.params.id=='all'){
              this.showCurrent=false
          }else{
              this.showCurrent=true
              this.currentOrder=this.$route.params.id
          }
          
      }else{
          this.isUser=false
           alert('请先登录')
      }
  }
}
</script>
<style scoped>
.container{
    width: 65%;
    margin: 0 auto;
    padding-top: 7.5em
}
.orderMenu{
    padding-bottom: 1.7em;
    /* border-bottom: solid #DBDBDB 1px */
    
}
.orderMenuItem{
    display: inline-block;
    padding-bottom: 1em;
    text-decoration: none;
    margin-right: 1em;
    color: #ADADAD;
    /* color: #A0A2A2; */
    border-bottom: solid #fff 2px;
    cursor: pointer;
}
.orderMenuItem:hover{
    border-bottom-color:  #008489;
}
.active{
    color: #555
}
</style>


